<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="java.util.List, com.petcommunity.model.Notice" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    List<Notice> notices = (List<Notice>) request.getAttribute("notices");
%>
<%
    String role = (String) session.getAttribute("role");
%>
<html>
<head>
    <title>通知公告管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/management.css">
</head>
<body>
    <!-- 装饰性爪印 -->
    <i class="fas fa-paw decorative-paws paw-1"></i>
    <i class="fas fa-paw decorative-paws paw-2"></i>
    <i class="fas fa-paw decorative-paws paw-3"></i>
    <i class="fas fa-paw decorative-paws paw-4"></i>

    <div class="page-container">
        <div class="main-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <h1 class="page-title">通知公告管理</h1>
                    <p class="page-subtitle">让重要消息及时抵达每个角落</p>
                </div>
            </div>

            <div class="content-wrapper">
                <!-- 添加通知表单 -->
                <c:if test="${role == 'admin'}">
                    <div class="form-section">
                        <div class="section-header">
                            <div class="section-title">
                                <i class="fas fa-plus section-icon"></i>
                                发布新通知
                            </div>
                        </div>
                        <form method="post" action="notices" class="add-form" accept-charset="UTF-8">
                            <div class="form-row">
                                <div class="form-group">
                                    <label>
                                        <i class="fas fa-heading"></i>
                                        通知标题
                                    </label>
                                    <input type="text" name="title" required placeholder="请输入通知标题">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label>
                                        <i class="fas fa-edit"></i>
                                        通知内容
                                    </label>
                                    <textarea name="content" rows="5" required placeholder="请输入通知内容"
                                            style="width: 100%; padding: 15px 20px; border: 2px solid #E8E8E8; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; background: white; font-family: inherit; resize: vertical; min-height: 120px;"></textarea>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="submit-btn">
                                    <i class="fas fa-paper-plane btn-icon"></i>
                                    发布通知
                                </button>
                            </div>
                        </form>
                    </div>
                </c:if>

                <!-- 通知列表 -->
                <div class="table-section">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-list section-icon"></i>
                            通知列表
                        </div>
                        <div class="table-info">
                            <span class="record-count">
                                <c:choose>
                                    <c:when test="${not empty notices}">
                                        ${notices.size()} 条通知
                                    </c:when>
                                    <c:otherwise>
                                        0 条通知
                                    </c:otherwise>
                                </c:choose>
                            </span>
                        </div>
                    </div>

                    <div class="table-container">
                        <c:choose>
                            <c:when test="${not empty notices}">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-hashtag"></i>
                                                    ID
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-heading"></i>
                                                    标题
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-align-left"></i>
                                                    内容
                                                </div>
                                            </th>
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-clock"></i>
                                                    发布时间
                                                </div>
                                            </th>
                                            <c:if test="${role == 'admin'}">
                                            <th>
                                                <div class="th-content">
                                                    <i class="fas fa-cogs"></i>
                                                    操作
                                                </div>
                                            </th>
                                            </c:if>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach var="n" items="${notices}">
                                            <tr>
                                                <td class="id-cell" data-label="ID">${n.noticeId}</td>
                                                <td data-label="标题">
                                                    <div style="font-weight: 500; color: #333; max-width: 200px; word-wrap: break-word;">
                                                        ${n.title}
                                                    </div>
                                                </td>
                                                <td data-label="内容">
                                                    <div style="color: #666; line-height: 1.4; max-width: 300px; word-wrap: break-word;">
                                                        ${n.content}
                                                    </div>
                                                </td>
                                                <td class="birth-date" data-label="发布时间">${n.createdAt}</td>
                                                <c:if test="${role == 'admin'}">
                                                <td data-label="操作">
                                                    <div class="action-buttons">
                                                        <button class="edit-btn" onclick="editNotice(${n.noticeId})">
                                                            <i class="fas fa-edit"></i>编辑
                                                        </button>
                                                        <button class="delete-btn" onclick="deleteNotice(${n.noticeId})">
                                                            <i class="fas fa-trash"></i>删除
                                                        </button>
                                                    </div>
                                                    </td>
                                                    </c:if>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </c:when>
                            <c:otherwise>
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-inbox"></i>
                                    </div>
                                    <h3>暂无通知</h3>
                                    <p>目前还没有发布任何通知公告</p>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>

                <!-- 返回按钮 -->
                <div class="back-section">
                    <a href="dashboard.jsp" class="back-btn">
                        <i class="fas fa-arrow-left"></i>
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 为 textarea 添加焦点样式 */
        textarea:focus {
            outline: none;
            border-color: #FF6B6B !important;
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
            transform: translateY(-2px);
        }

        textarea::placeholder {
            color: #999;
        }

        /* 通知内容列的样式优化 */
        .data-table td div {
            max-height: 100px;
            overflow-y: auto;
        }
    </style>
    <script>
// 编辑宠物
// 编辑通知
function editNotice(id) {
    if (confirm('确定要编辑这条通知吗？')) {
        window.location.href = 'edit?type=notice&id=' + id;
    }
}

// 删除通知
function deleteNotice(id) {
    if (confirm('确定要删除这条记录吗？此操作不可恢复！')) {
        window.location.href = 'delete?type=notice&id=' + id;
    }
}

</script>
</body>
</html>